<template>
	<view class="u-page">
		<zx-nav title="修改密码"  bg="#fff" ></zx-nav>
		<view class="main">
			<view class="form card">
				<u--form :model="formInfo" ref="form1" >
					<view class="input-box">
						<u-form-item label="原密码" prop="userInfo.oldPassword" borderBottom labelWidth="140">
							<u--input
								v-model="formInfo.userInfo.oldPassword"
								placeholder="原密码"
								clearable
								type="password"
								border="none"
								placeholderClass="placeholder"
							></u--input>
						</u-form-item>
					</view>
					<view class="input-box">
						<u-form-item label="新密码" prop="userInfo.newPassword" borderBottom labelWidth="140">
							<u--input
								v-model="formInfo.userInfo.newPassword"
								@change="changePwd"
								placeholder="新密码"
								clearable
								type="password"
								border="none"
								placeholderClass="placeholder"
							></u--input>
						</u-form-item>
					</view>
					<view class="input-box">
						<u-form-item label="再次确认" prop="userInfo.confirm_password" borderBottom labelWidth="140">
							<u--input
								v-model="formInfo.userInfo.confirm_password"
								placeholder="确认密码"
								clearable
								type="password"
								border="none"
								placeholderClass="placeholder"
							></u--input>
						</u-form-item>
					</view>
				</u--form>
				<view class="tips">密码长度为6~30位，必须包含数字、字母、符号中至少一种</view>
			</view>
			<u-button text="确定" @tap="submit" hover-class="btn-hover" size="normal" type="primary" shape="circle" :loading="loading"></u-button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
var reg = /^[^\u4e00-\u9fa5|\s\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]{6,30}$/;
import md5Libs from '@/utils/md5.js';
export default {
	name: 'changPwd',
	data() {
		return {
			formInfo: {
				userInfo: {
					oldPassword: '',
					newPassword: '',
					confirm_password: ''
				}
			},
			rules: {
				'userInfo.oldPassword': {
					type: 'string',
					required: true,
					pattern: reg,
					message: '请输入6~30位的数字、字母和符号组成的原密码',
					trigger: ['blur', 'change']
				},
				'userInfo.newPassword': [
					{
						type: 'string',
						required: true,
						pattern: reg,
						message: '请输入6~30位的数字、字母和符号组成的新密码',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (this.formInfo.userInfo.confirm_password) {
								return this.formInfo.userInfo.confirm_password == value;
							} else {
								return true;
							}
						},
						message: '必须和确认密码一致',
						trigger: ['blur', 'change']
					}
				],
				'userInfo.confirm_password': [
					{
						required: true,
						message: '请输入确认密码',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					},
					{
						type: 'string',
						pattern: reg,
						message: '请输入6~30位的数字、字母和符号组成的新密码',
						trigger: ['blur', 'change']
					},
					// 自定义规则判断是否包含字母"A"
					{
						validator: (rule, value, callback) => {
							if (this.formInfo.userInfo.newPassword) {
								return this.formInfo.userInfo.newPassword == value;
							} else {
								return true;
							}
						},
						message: '必须和新密码一致',
						trigger: ['blur', 'change']
					}
				]
			},
			loading: false
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onReady() {
		if (this.$refs.form1) {
			this.$refs.form1.setRules(this.rules);
		}
	},
	created() {
		this.getMd5PassIsNull();
	},
	methods: {
		//获取是否有md5密码
		getMd5PassIsNull() {
			this.$postAction(this.$api.getMd5PassIsNull + '?username=' + this.userInfo.username)
				.then(da => {
					this.isHasMdspwd = da;
				})
				.catch(err => {
					//返回错误
				});
		},
		changePwd() {
			if (this.formInfo.userInfo.confirm_password) {
				this.$refs.form1.validateField('userInfo.confirm_password');
			}
		},
		submit() {
			if (this.$refs.form1) {
				this.$refs.form1.validate().then(res => {
					this.saveInfo();
				});
			} else {
				if (!this.formInfo.userInfo['oldPassword']) {
					uni.showToast({
						title: '请输入原密码',
						icon: 'none'
					});
					return false;
				} else {
					if (!reg.test(this.formInfo.userInfo['oldPassword'])) {
						uni.showToast({
							title: '请输入6~30位的数字、字母和符号组成的原密码',
							icon: 'none'
						});
						return false;
					}
				}
				if (!this.formInfo.userInfo['newPassword']) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return false;
				} else {
					if (!reg.test(this.formInfo.userInfo['newPassword'])) {
						uni.showToast({
							title: '请输入6~30位的数字、字母和符号组成的新密码',
							icon: 'none'
						});
						return false;
					}
				}
				if (!this.formInfo.userInfo['confirm_password']) {
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					});
					return false;
				} else {
					if (!reg.test(this.formInfo.userInfo['confirm_password'])) {
						uni.showToast({
							title: '请输入6~30位的数字、字母和符号组成的新密码',
							icon: 'none'
						});
						return false;
					}
					if (this.formInfo.userInfo['confirm_password'] != this.formInfo.userInfo['newPassword']) {
						uni.showToast({
							title: '确认密码必须和新密码一致',
							icon: 'none'
						});
						return false;
					}
				}
				this.saveInfo();
			}
		},
		saveInfo() {
			let params = {
				newPassword: md5Libs.md5(this.formInfo.userInfo.newPassword),
				oldPassword: this.formInfo.userInfo.oldPassword,
				username: this.userInfo.username
			};
			if (this.isHasMdspwd == 1) {
				params.oldPassword = md5Libs.md5(this.formInfo.userInfo.oldPassword);
			}
			if (this.loading) return;
			this.loading = true;
			this.$postAction(this.$api.updatePass, params)
				.then(da => {
					this.loading = false;
					uni.$u.toast('修改密码成功，请重新登录');
					uni.setStorageSync('accountInfo', {});
					setTimeout(() => {
						this.loading = false;
						this.$Router.replaceAll({
							path: '/pages/login/login'
						});
					}, 2000);
				})
				.catch(() => {
					this.loading = false;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.u-page {
	.top-wrap {
		background: #ffffff;
	}
	.main {
		margin: 32upx;
	}
	/deep/.form {
		padding: 12upx 48upx 32upx;
		margin-bottom: 60upx;
		.placeholder {
			font-size: 30upx;
			font-weight: 400;
			color: #969696;
			opacity: 0.6;
		}

		.u-border-bottom {
			border-bottom-width: 2upx !important;
			border-color: #f1f1f1 !important;
		}

		.u-form-item__body {
			padding: 16upx 0 !important;
		}

		.uni-input-input {
			color: #1b0a1c;
			font-size: 30upx;
		}
		.input-box {
			padding-bottom: 30upx;
		}
	}

	.tips {
		font-size: 20upx;
		color: $u-warning;
	}
}
</style>
